<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="top-nav">
        <div class="nav-tabs">
          <div class="nav-item active">酸轧TCM2280</div>
          <div class="nav-item">镀锌CGL1870</div>
          <div class="nav-item">连退CAL2150</div>
          <div class="nav-item">连退CAL1630</div>
          <div class="nav-item">精炼</div>
          <div class="nav-item">转炉</div>
        </div>
      </el-header>

      <!-- 控制面板 -->
      <el-header class="control-panel">
        <el-form :model="searchHeader" label-width="auto" class="header-search-form" :inline="true">
          <el-form-item label="开始时间" class="time-period-picker">
            <el-date-picker
              v-model="searchHeader.startDate"
              type="date"
              placeholder="开始时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="MMM DD, YYYY"
              time-format="HH:mm"
              :editable="false"
              style="min-width: 200px"
              class="start"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchHeader.endDate"
              type="date"
              placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="MMM DD, YYYY"
              time-format="HH:mm"
              :editable="false"
              style="min-width: 200px"
            />
          </el-form-item>
          <div class="form-btns">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </div>
        </el-form>
        <!-- <div class="control-row">
          <div class="control-group">
            <span class="label">开始时间:</span>
            <el-date-picker v-model="searchHeader.startDate" type="datetime" placeholder="选择开始时间" class="date-picker" />
            <span class="separator">→</span>
            <el-date-picker v-model="searchHeader.endDate" type="datetime" placeholder="选择结束时间" class="date-picker" />
          </div>
          <div class="control-group">
            <span class="label">钢种:</span>
            <el-select v-model="searchHeader.steelGrade" placeholder="请选择" class="select-input">
              <el-option label="请选择" value="" />
              <el-option label="DC01" value="DC01" />
              <el-option label="DC03" value="DC03" />
              <el-option label="DC04" value="DC04" />
            </el-select>
          </div>
        </div>
        <div class="control-row">
          <div class="control-group">
            <span class="label">原料厚度:</span>
            <el-input v-model="searchHeader.entThickStart" placeholder="请输入" class="number-input" />
            <span class="separator">-</span>
            <el-input v-model="searchHeader.entThickEnd" placeholder="请输入" class="number-input" />
          </div>
          <div class="control-group">
            <span class="label">原料宽度:</span>
            <el-input v-model="searchHeader.entWidthStart" placeholder="请输入" class="number-input" />
            <span class="separator">-</span>
            <el-input v-model="searchHeader.entWidthEnd" placeholder="请输入" class="number-input" />
          </div>
          <div class="control-group">
            <span class="label">出口厚度:</span>
            <el-input v-model="searchHeader.extThickStart" placeholder="请输入" class="number-input" />
            <span class="separator">-</span>
            <el-input v-model="searchHeader.extThickEnd" placeholder="请输入" class="number-input" />
          </div>
          <div class="control-group">
            <span class="label">出口宽度:</span>
            <el-input v-model="searchHeader.extWidthStart" placeholder="请输入" class="number-input" />
            <span class="separator">-</span>
            <el-input v-model="searchHeader.extWidthEnd" placeholder="请输入" class="number-input" />
          </div>
          <div class="control-group">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </div>
        </div> -->
      </el-header>

      <el-container class="main-content">
        <!-- 左侧数据列表 -->
        <el-aside width="300px" class="data-list">
          <div class="list-header">
            <span class="header-title">数据列表</span>
            <el-button type="success" size="small" @click="handleExportList">导出</el-button>
          </div>
          <el-table
            :data="dataList"
            height="calc(100vh - 400px)"
            class="data-table"
            :header-cell-style="{ background: '#2f59af', color: '#fff', textAlign: 'center' }"
            :cell-style="{ color: '#fff', textAlign: 'center' }"
            v-loading="false"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            @row-click="coildListClick"
          >
            <el-table-column prop="serialNumber" label="序号" width="80" />
            <el-table-column prop="dialNumber" label="卷号" />
            <template #empty>
              <div style="color: #fff; text-align: center; padding: 20px">暂无数据</div>
            </template>
          </el-table>
        </el-aside>

        <!-- 右侧图表区域 -->
        <el-main class="charts-container">
          <div class="charts-grid">
            <div class="chart-item" v-for="index in 6" :key="index">
              <div :id="`chartRef${index - 1}`" class="chart-container">
                <div v-if="!getChartData(index - 1)?.x?.length" style="color: #fff; text-align: center; padding: 20px; font-size: 14px">暂无数据</div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="90%"
    class="dialog"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    @close="close"
  >
    <pcrc-chart :coild-no="clickCoildNo" :production-line="'1'" />
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, nextTick } from 'vue';
  import { processParamApi } from '/@/api/report/index';
  import { ElMessage } from 'element-plus';
  import type { TabsPaneContext } from 'element-plus';
  import * as echarts from 'echarts';
  import pcrcChart from './components/PPCRChart.vue';

  // 搜索头
  const searchHeader = {
    prodLine: '',
    startDate: '',
    endDate: '',
    steelGrade: '',
    entThickStart: '',
    entThickEnd: '',
    entWidthStart: '',
    entWidthEnd: '',
    extThickStart: '',
    extThickEnd: '',
    extWidthStart: '',
    extWidthEnd: '',
  };
  const dialogVisible = ref(false);
  const dialogTitle = ref('');
  const clickCoildNo = ref('');

  const coildListClick = (row: any) => {
    dialogVisible.value = true;
    clickCoildNo.value = row.dialNumber;
  };

  const close = () => {
    dialogVisible.value = false;
  };

  // 数据列表 - 根据 techList 接口返回值动态渲染
  const dataList = ref<Array<{ serialNumber: number; dialNumber: string }>>([]);

  // 图表引用
  const charts = ref(Array(6).fill(null));

  // 图表数据 - 根据 techFit 接口返回值动态渲染
  const chartData = ref({
    a: { x: [], y: [] },
    b: { x: [], y: [] },
    c: { x: [], y: [] },
    d: { x: [], y: [] },
    e: { x: [], y: [] },
    f: { x: [], y: [] },
  });

  // 初始化单个图表 - 使用 API 返回的数据
  const initChart = (chartRef: any, index: number) => {
    if (chartRef) {
      // 确保容器有尺寸
      if (chartRef.offsetWidth === 0 || chartRef.offsetHeight === 0) {
        return null;
      }

      // 获取对应图表的数据
      const chartKeys = ['a', 'b', 'c', 'd', 'e', 'f'];
      const currentChartKey = chartKeys[index];
      const currentChartData = chartData.value[currentChartKey as keyof typeof chartData.value];

      // 如果没有数据，不显示图表
      if (!currentChartData || !currentChartData.x || !currentChartData.y || currentChartData.x.length === 0) {
        return null;
      }

      const chart = echarts.init(chartRef);

      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '单值',
          textStyle: {
            color: '#fff',
            fontSize: '14px',
            fontWeight: 'bold',
          },
          left: 'left',
          top: '5%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderColor: '#0072ff',
          textStyle: { color: '#fff' },
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '20%',
          bottom: '15%',
        },
        xAxis: {
          type: 'category',
          data: currentChartData.x,
          axisLabel: {
            color: '#fff',
            fontSize: '10px',
            interval: function (index: number, value: any) {
              // 平均显示10个点
              const totalPoints = currentChartData.x.length;
              if (totalPoints <= 10) {
                return true; // 如果数据点少于等于10个，全部显示
              } else {
                // 如果数据点超过10个，平均选择10个点显示
                const step = Math.floor(totalPoints / 10);
                return index % step === 0;
              }
            },
          },
          axisLine: {
            lineStyle: { color: '#fff' },
          },
          axisTick: {
            show: false,
          },
          splitLine: { show: false },
        },
        yAxis: {
          type: 'value',
          name: '单值',
          nameTextStyle: {
            color: '#fff',
            fontSize: '12px',
          },
          axisLabel: {
            color: '#fff',
            fontSize: '10px',
          },
          axisLine: {
            lineStyle: { color: '#fff' },
          },
          axisTick: {
            lineStyle: { color: '#fff' },
          },
          splitLine: {
            lineStyle: {
              color: '#333',
              type: 'dashed',
            },
          },
        },
        series: [
          {
            type: 'line',
            data: currentChartData.y,
            smooth: false,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              color: '#0072ff',
              width: 2,
            },
            itemStyle: {
              color: '#0072ff',
              borderColor: '#fff',
              borderWidth: 1,
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(0, 114, 255, 0.2)' },
                  { offset: 1, color: 'rgba(0, 114, 255, 0.05)' },
                ],
              },
            },
          },
        ],
      };

      chart.setOption(option);
      return chart;
    }
  };

  // 初始化所有图表
  const initAllCharts = () => {
    nextTick(() => {
      setTimeout(() => {
        for (let i = 0; i < 6; i++) {
          const chartRef = document.getElementById(`chartRef${i}`);
          if (chartRef) {
            initChart(chartRef, i);
          } else {
            console.log(`未找到图表容器 ${i}`);
          }
        }
      }, 500); // 增加延迟确保DOM完全渲染
    });
  };

  // 查询按钮
  const handleQuery = () => {
    ElMessage.success('查询成功');
    // 重新获取数据并更新图表
    fetchData();
  };

  // 导出按钮
  const handleExport = () => {
    ElMessage.success('导出成功');
  };

  // 导出列表按钮
  const handleExportList = () => {
    ElMessage.success('列表导出成功');
  };

  onMounted(() => {
    // 调用接口获取数据
    fetchData();

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      // 重新初始化图表以适应新尺寸
      setTimeout(() => {
        initAllCharts();
      }, 200);
    });
  });

  // 获取指定图表数据的辅助函数
  const getChartData = (index: number) => {
    const chartKeys = ['a', 'b', 'c', 'd', 'e', 'f'];
    const currentChartKey = chartKeys[index];
    return chartData.value[currentChartKey as keyof typeof chartData.value];
  };

  // 获取数据的函数
  const fetchData = async () => {
    try {
      const techListResponse = await processParamApi.techList(searchHeader);

      // 处理 techList 返回的数据，更新数据列表
      if (techListResponse && techListResponse.data && techListResponse.data.data && Array.isArray(techListResponse.data.data)) {
        dataList.value = techListResponse.data.data.map((item: any) => ({
          serialNumber: item.seqno,
          dialNumber: item.volumeNo,
        }));
      } else {
        dataList.value = [];
      }

      // 调用 techFit 接口
      const techFitParams = {
        // startDate: startTime.value,
        // endDate: endTime.value,
        // prodLine: '',
        // steelGrade: steelGrade.value,
        // thickStart: Number(rawThicknessMin.value) || 0,
        // thickEnd: Number(rawThicknessMax.value) || 0,
        // entWidthStart: Number(rawWidthMin.value) || 0,
        // entWidthEnd: Number(rawWidthMax.value) || 0,
        // levelStart: Number(outputThicknessMin.value) || 0,
        // levelEnd: Number(outputThicknessMax.value) || 0,
        // contrTarget: Number(controlTarget.value) || 0,
        // param: parameter.value,
      };

      const techFitResponse = await processParamApi.techFit(techFitParams);

      // 处理 techFit 返回的数据，更新图表数据
      if (techFitResponse && techFitResponse.data && techFitResponse.data.data) {
        chartData.value = {
          a: techFitResponse.data.data.a || { x: [], y: [] },
          b: techFitResponse.data.data.b || { x: [], y: [] },
          c: techFitResponse.data.data.c || { x: [], y: [] },
          d: techFitResponse.data.data.d || { x: [], y: [] },
          e: techFitResponse.data.data.e || { x: [], y: [] },
          f: techFitResponse.data.data.f || { x: [], y: [] },
        };
      }

      // 数据获取完成后初始化图表
      setTimeout(() => {
        initAllCharts();
      }, 500);
    } catch (error) {
      console.error('获取数据失败:', error);
      // 清空数据
      dataList.value = [];
      chartData.value = {
        a: { x: [], y: [] },
        b: { x: [], y: [] },
        c: { x: [], y: [] },
        d: { x: [], y: [] },
        e: { x: [], y: [] },
        f: { x: [], y: [] },
      };
    }
  };
</script>

<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 2px 4px rgba(51, 102, 153, 0.5);

  .home {
    height: 105vh;
    overflow: hidden !important;
  }

  // 顶部导航样式
  .top-nav {
    height: 60px !important;
    padding: 0 20px;
    background: transparent;
    border-bottom: 2px solid #0072ff;

    .nav-tabs {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 20px;

      .nav-item {
        padding: 8px 16px;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        font-weight: 500;

        &:hover {
          background-color: rgba(255, 255, 255, 0.2);
          border-color: #fff;
        }

        &.active {
          background-color: #0072ff;
          border-color: #fff;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
          font-weight: bold;
        }
      }
    }
  }

  // 控制面板样式
  .control-panel {
    height: auto !important;
    padding: 20px;
    background: transparent;
    border-bottom: 1px solid #0072ff;

    // .control-row {
    //   display: flex;
    //   align-items: center;
    //   margin-bottom: 15px;
    //   gap: 20px;

    //   .control-group {
    //     display: flex;
    //     align-items: center;
    //     gap: 8px;

    //     .label {
    //       color: #fff;
    //       font-size: 14px;
    //       white-space: nowrap;
    //       min-width: 80px;
    //     }

    //     .date-picker {
    //       width: 180px;
    //     }

    //     .select-input {
    //       width: 120px;
    //     }

    //     .text-input {
    //       width: 200px;
    //     }

    //     .number-input {
    //       width: 80px;
    //     }

    //     .separator {
    //       color: #fff;
    //       font-size: 16px;
    //       margin: 0 5px;
    //     }
    //   }
    // }
  }

  // 主内容区域
  .main-content {
    height: calc(100vh - 200px);
    background: transparent;
  }

  // 左侧数据列表
  .data-list {
    background: transparent;
    border-right: 1px solid #0072ff;
    padding: 20px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #0072ff;

      .header-title {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .data-table {
      :deep(.el-table) {
        background-color: transparent;
        --el-table-border: none;
        color: white;

        :deep(.el-table__row:nth-child(odd)) {
          background-color: rgba(34, 54, 113, 0.3);
        }

        .el-table__row {
          height: 40px;
        }

        .el-table__cell {
          padding: 8px 4px;
          border-bottom: 1px solid rgba(0, 114, 255, 0.2);

          .cell {
            font-size: 12px;
          }
        }
      }
    }
  }

  // 右侧图表区域
  .charts-container {
    padding: 20px;
    background: transparent;

    .charts-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 20px;
      height: 100%;

      .chart-item {
        background: transparent;
        border: 1px solid #0072ff;
        border-radius: @border-radius;
        padding: 15px;
        transition: all 0.3s ease;

        &:hover {
          border-color: #00eaff;
          box-shadow: 0 0 20px rgba(0, 234, 255, 0.3);
        }

        .chart-container {
          width: 100%;
          height: 100%;
          min-height: 250px;
          background: transparent;
          border: 1px solid rgba(0, 114, 255, 0.3);
        }
      }
    }
  }

  // 表单控件样式
  :deep(.el-input__wrapper) {
    background-color: transparent !important;
    border: 1px solid #0072ff !important;
    box-shadow: none !important;
  }

  :deep(.el-input__inner) {
    color: #fff !important;
    font-size: 12px;
  }

  :deep(.el-select__wrapper) {
    background-color: transparent !important;
    border: 1px solid #0072ff !important;
    box-shadow: none !important;
  }

  :deep(.el-select__input) {
    color: #fff !important;
    font-size: 12px;
  }

  :deep(.el-date-editor) {
    background-color: transparent !important;
    border: 1px solid #0072ff !important;
    box-shadow: none !important;
  }

  :deep(.el-date-editor .el-input__inner) {
    color: #fff !important;
    font-size: 12px;
  }

  :deep(.el-button) {
    background-color: #0072ff !important;
    border-color: #0072ff !important;
    color: #fff !important;
    font-size: 12px;
    height: 32px;
    padding: 0 16px;

    &:hover {
      background-color: #0056cc !important;
      border-color: #0056cc !important;
    }

    &.el-button--success {
      background-color: #67c23a !important;
      border-color: #67c23a !important;

      &:hover {
        background-color: #5daf34 !important;
        border-color: #5daf34 !important;
      }
    }
  }

  // :deep(.el-select-dropdown) {
  //   background-color: rgba(0, 0, 0, 0.9) !important;
  //   border: 1px solid #0072ff !important;
  // }

  // :deep(.el-select-dropdown__item) {
  //   color: #fff !important;

  //   &:hover {
  //     background-color: rgba(0, 114, 255, 0.3) !important;
  //   }
  // }

  // :deep(.el-date-picker) {
  //   background-color: rgba(0, 0, 0, 0.9) !important;
  //   border: 1px solid #0072ff !important;
  //   color: #fff !important;
  // }

  // :deep(.el-date-picker__header) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-picker__header-label) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-table th) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-table td) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-table td.available:hover) {
  //   color: #fff !important;
  //   background-color: rgba(0, 114, 255, 0.3) !important;
  // }

  // :deep(.el-date-table td.current:not(.disabled) span) {
  //   background-color: rgba(0, 114, 255, 0.3) !important;
  //   color: #fff !important;
  // }

  // :deep(.el-time-panel) {
  //   background-color: rgba(0, 0, 0, 0.9) !important;
  //   border: 1px solid #0072ff !important;
  // }

  // :deep(.el-time-panel__content) {
  //   color: #fff !important;
  // }

  // :deep(.el-time-spinner__item) {
  //   color: #fff !important;
  // }

  // :deep(.el-time-spinner__item.active:not(.disabled)) {
  //   color: #fff !important;
  //   background-color: rgba(30, 58, 138, 0.8) !important;
  // }

  // :deep(.el-time-spinner__item:hover:not(.disabled):not(.active)) {
  //   background-color: rgba(30, 58, 138, 0.8) !important;
  // }

  /* 表格样式 */
  :deep(.el-table) {
    background-color: transparent;
    --el-table-border: none;
    color: white;

    :deep(.el-table__row:nth-child(odd)) {
      background-color: rgba(30, 58, 138, 0.6);
    }

    .el-table__row {
      height: auto !important;
      line-height: 1.2;
    }

    .el-table__cell {
      padding: 2px 4px !important;

      .cell {
        font-size: 16px !important;
        transform: scale(0.85);
        transform-origin: left;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
  }

  :deep(.el-table th),
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
  }

  // 表单控件样式
  :deep(.el-select) {
    width: 1rem;
    right: 1rem;
    background-color: transparent !important;
    color: #fff;
  }

  :deep(.el-select__wrapper) {
    background-color: transparent !important;
  }

  :deep(.el-input__wrapper) {
    background-color: rgba(59, 130, 246, 0.8) !important;
    box-shadow: none !important;
  }

  :deep(.el-input__inner) {
    color: #fff !important;
  }

  :deep(.el-select-dropdown__item) {
    color: #fff !important;
  }

  :deep(.el-select-dropdown__item.hover, .el-select-dropdown__item:hover) {
    background-color: rgba(30, 58, 138, 0.8) !important;
  }

  :deep(.el-select-dropdown) {
    background-color: rgba(59, 130, 246, 0.9) !important;
    border: 1px solid #0072ff !important;
  }

  :deep(.custom-date-picker.el-date-editor) {
    width: 260px !important;
    height: 28px;
    background-color: transparent !important;
    border: 1px solid #fff;
    box-shadow: none;
  }

  :deep(.el-date-picker) {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid #0072ff !important;
    color: #fff !important;
  }

  :deep(.el-date-picker__header) {
    color: #fff !important;
  }

  :deep(.el-date-picker__header-label) {
    color: #fff !important;
  }

  :deep(.el-date-table th) {
    color: #fff !important;
  }

  :deep(.el-date-table td) {
    color: #fff !important;
  }

  :deep(.el-date-table td.available:hover) {
    color: #fff !important;
    background-color: rgba(0, 114, 255, 0.3) !important;
  }

  :deep(.el-date-table td.current:not(.disabled) span) {
    background-color: rgba(0, 114, 255, 0.3) !important;
    color: #fff !important;
  }

  // :deep(.el-date-picker__time-header) {
  //   color: #fff !important;
  // }

  // :deep(.el-time-panel) {
  //   background-color: rgba(0, 0, 0, 0.9) !important;
  //   border: 1px solid #0072ff !important;
  // }

  // :deep(.el-time-panel__content) {
  //   color: #fff !important;
  // }

  // :deep(.el-time-spinner__item) {
  //   color: #fff !important;
  // }

  // :deep(.el-time-spinner__item.active:not(.disabled)) {
  //   color: #fff !important;
  //   background-color: rgba(0, 114, 255, 0.3) !important;
  // }

  // :deep(.el-time-spinner__item:hover:not(.disabled):not(.active)) {
  //   background-color: rgba(0, 114, 255, 0.3) !important;
  // }

  // :deep(.el-date-editor .el-range-separator) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-editor .el-range-input) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-editor .el-range__icon) {
  //   color: #fff !important;
  // }

  // :deep(.el-date-editor .el-range__close-icon) {
  //   color: #fff !important;
  // }

  .right-content .label {
    margin-right: 18px;
    margin-left: 5px;
    white-space: nowrap;
    font-size: 12px;
    min-width: 80px;
    text-align: right;
  }

  .custom-input,
  .custom-select,
  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper) {
    height: 28px;
    line-height: 28px;
    background-color: transparent !important;
    border: 1px solid #0072ff !important;
    border-radius: 3px !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 12px !important;
  }

  // ---------------------------------------------------------------------------------------------------------------

  .header-search-form {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    margin: 0.5% auto;
    justify-content: space-between;

    :deep(.el-form-item__label) {
      color: #fff !important;
    }
  }
</style>
